<template>
  <div class="catagory">
    <!--所有类目-->
    <div class="selected-item">
      <div class="title">所有结果</div>
      <div class="selected-sku" v-for="(selectedClassify, index) in classifyList" v-bind:key="index">
        <span>{{selectedClassify}}</span>
        <i @click="deleteCatagory(selectedClassify)" class="transition">&times;</i>
        <span v-show="index != (classifyList.length - 1)">，</span>
      </div>
      <div class="comma" v-show="classifyList && classifyList.length">&nbsp,&nbsp</div>
      <div class="keyword">{{keyWord}}</div>
      <!-- 总数量 -->
      <div class="buy-number">共 {{number}} 件相关商品</div>
      <div class="clear"></div>
    </div>
    <div class="props" v-for="(catagory, index) in catagoryList" :key="index" :style="{'height': `${catagory.height}px`}" v-show="isShowProps(index)">
      <span class="name" :title="catagory.name" :style="{'height': `${catagory.height}px`}">{{catagory.name}}</span>
      <!-- 分类集合 -->
      <span class="prop-list">
        <span class="prop" :title="child" v-for="(child, index) in catagory.childs" v-bind:key="index" @click="getCatagoryFn(child)">{{child}}</span>
      </span>
      <span class="more" v-show="catagory.childs.length > lineNumber" @click="showCatagory(catagory)">{{catagory.show ? '收起': '更多'}} <i class="iconfont" :class="{'ico-arrowdownxi': !catagory.show, 'ico-arrowtopxi': catagory.show}"></i></span>
    </div>
    <div class="deploy" v-if="catagoryList && catagoryList.length > 5" @click="showUp = !showUp">{{showUp ? '精简选项': '更多选项'}} <i class="iconfont" :class="{'ico-arrowtopxi': showUp, 'ico-arrowdownxi': !showUp}"></i></div>
    <div class="clear"></div>
  </div>
</template>

<script>
export default {
  props: {
    /* 分类 */
    catagorys: {
      type: Array,
      default: () => { return [] }
    },
    value: {
      type: String,
      default: ''
    },
    number: {
      type: [Number, String],
      default: ''
    }
  },
  data() {
    return {
      catagoryList: [],
      lineNumber: 12,
      oneHeight: 36,
      showUp: false,
      lastClass: '',
      classifyList: [],
      catagoryCodeList: [],
      keyWord: ''
    }
  },
  created() {
    // 监听路由中是否存在商品类目
    if (this.$route.query.p) {
      const pros = this.$route.query.p.split(',')
      this.classifyList = pros
    }
    if (this.$route.query.key) {
      const routeKw = this.$route.query.key
      this.keyWord = routeKw
    }
  },
  methods: {
    /**
     * 展示分类
     *
     * @param { Object } catagory 分类
     */
    showCatagory(catagory) {
      catagory.show = !catagory.show
      // 如果是展开的状态
      if (catagory.show) {
        catagory.height = Math.ceil(catagory.childs.length / this.lineNumber) * this.oneHeight
        return
      }
      catagory.height = this.oneHeight
    },
    isShowProps(index) {
      // 如果当前是前4个
      if (index < 4) {
        return true
      }
      // 如果当前是展示全部
      if (this.showUp) {
        return true
      }
      // 隐藏
      return false
    },
    /**
     * 点击了类别，将类别展示在所有类目上
     *
     * @param {Object} catagory 当前点击的类别
     */
    getCatagoryFn(catagory) {
      // 先从数据中删除已经选中的属性（如果被选中了）
      this.classifyList = this.classifyList.filter((v) => { return v != catagory })
      // 将点中的放到数据中
      this.classifyList.push(catagory)
      // 向上通知
      this.$emit('input', this.classifyList.join(','))
      this.$emit('set', this.classifyList.join(','))
    },

    /**
     * 点击删除商品的类目
     *
     * @param { String } catagory 属性字符串
     */
    deleteCatagory(catagory) {
      // 清空页面中选中删除的商品类目数据
      this.classifyList = this.classifyList.filter((v) => {
        return v != catagory
      })
      // 清除路由中点击删除的商品类目
      // let newSearch = `${this.$route.fullPath.split('&p')[0]}&p=${this.classifyList.join(',')}`
      // this.$router.push(newSearch)

      // 向上通知
      this.$emit('input', this.classifyList.join(','))
      this.$emit('set', this.classifyList.join(','))
    }
  },
  watch: {
    catagorys() {
      // 如果没有分类属性数据
      if (!this.catagorys || this.catagorys.length == 0) {
        this.catagoryList = []
        return
      }

      // 清空选中的列表
      this.catagoryList = []

      // 组装报文
      this.catagorys.forEach((v) => {
        this.catagoryList.push({
          name: v.name,
          id: v.goodsTypePropertyId,
          show: false,
          childs: v.value ? v.value.split(',') : []
        })
      })

      // 如果和上次的类目不一样，则将此值初始化
      if (this.lastClass != JSON.stringify(this.catagorys)) {
        // 初始化
        this.showUp = false
      }

      this.lastClass = JSON.stringify(this.catagorys)
    },
    value() {
      // 如果外界绑定的值是空，则设置清空选中的值
      if (!this.value) {
        // 初始化
        this.showUp = false
        this.classifyList = []
      }
    },
    $route(to, from) {
      if (this.$route.query.key) {
        const routeKw = this.$route.query.key
        this.keyWord = routeKw
      } else {
        this.keyWord = '全部'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.clear {
  clear: both;
}
.catagory {
  user-select: none;

  .selected-item {
    font-size: 12px;
    line-height: 46px;
    padding: 0px 0px 0px 18px;

    .title {
      color: #000000;
      display: inline-block;
      font-size: 12px;
      margin-right: 14px;

      &:after {
        content: '>';
        margin-left: 6px;
      }
    }

    .keyword, .comma {
      color: #666666;
      display: inline-block;
    }

    .selected-sku {
      color: #666666;
      cursor: default;
      display: inline-block;

      i {
        cursor: pointer;
        display: none;
        font-size: 12px;
        text-align: center;
      }

      &:hover {
        color: #F00384;

        i {
          display: inline-block;
        }
      }
    }

    .buy-number {
      color: #8e8e8e;
      font-size: 12px;
      float: right;
    }
  }

  .props {
    background-color: #FFFFFF;
    border: 1px dashed lightgrey;
    border-left: 0px;
    border-right: 0px;
    color: #666666;
    font-size: 12px;
    height: 36px;
    margin-bottom: -1px;
    overflow: hidden;

    .name {
      background-color: #f5f5f5;
      color: #999999;
      display: inline-block;
      float: left;
      line-height: 36px;
      margin-right: 10px;
      width: 112px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding-left: 18px;
    }

    .prop-list {
      display: inline-block;
      width: 84%;

      .prop {
        cursor: pointer;
        display: inline-block;
        margin-right: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 36px;
        min-width: 70px;
        white-space: nowrap;
        &:hover {
          color: #F00384;
        }
      }
    }

    .more {
      cursor: pointer;
      float: right;
      line-height: 36px;

      i {
        font-size: 12px;
      }
    }
  }

  .deploy {
    background-color: #f5f5f5;
    color: #6d6d6d;
    cursor: pointer;
    float: right;
    width: 84px;
    height: 24px;
    line-height: 24px;
    margin-top: 1px;
    text-align: center;

    i {
      font-size: 12px;
    }
  }
}
</style>